<template>
  <div class="addEditArticlePageCont">
    <div class='title'>当前位置：文章管理 / 查看文章</div>
    <div class="addEditArticlePageMian">

      <div v-if="info && info.auditStatus != 1 && info.auditStatus != 4"
        style="padding-left: 10px;position: relative;">
        <Tabs v-model="tab" type='card' @on-click="onTab" name='articleDetailTab'>
          <TabPane label="展示中的文章" name="1" tab='articleDetailTab'></TabPane>
          <TabPane :label="auditRebut ? '已驳回的文章' : '审核中的文章'" name="2" tab='articleDetailTab'>
          </TabPane>
        </Tabs>
        <Tag color="gold" style="position: absolute;left: 265px;top: 0px;">
          <Icon type="md-alert" style="color: orange;" />
          <span style="color: gray;margin-left: 5px;">{{auditRebut ? 
           '文章已被驳回，可在列表重新编辑文章内容'
          : (old ? '文章审核通过后将替换现有展示中的文章' : '文章审核通过后，请及时上架文章')}}</span>
        </Tag>
      </div>

      <Form ref="formAddEditArticle" :label-width="110">
        <FormItem v-if="info && auditRebut && tab == '2'" label="驳回原因：">
          {{info.rebutReason}}
        </FormItem>
        <FormItem label="文章标题：" prop="articleTags">
          {{articleTitle || '无'}}
          <Button type="info" size="small" style="margin-left:30px;"
            @click="onAuditLog" v-if="articleTitle">审核记录</Button>
        </FormItem>
        <FormItem label="文章正文：" prop="articleTags">
          <div style="padding: 8px 0 0 0;">
            <dt-editor-show v-if="newArticleContent" :content='newArticleContent' />
            <dt-editor-show v-else :content='articleContent || "无"' />
          </div>
        </FormItem>
        <FormItem v-if='sensitiveWords' label="敏感词汇：">
          <div class="wrong">
            {{sensitiveWords}}
          </div>
        </FormItem>
        <FormItem label="图片\视频：" class="FormItemUpload">
          <template>
            <div v-if="preViewImg.length">
              <div class="demo-upload-list" v-for="(item, index) in preViewImg" :key="index">
                <img :src="item">
                <div class="demo-upload-list-cover">
                  <Icon type="ios-eye-outline" @click="handleView(item)"></Icon>
                </div>
              </div>
            </div>
            <div v-if="preViewVideo" class="demo-upload-list">
              <video controls="controls" :src="preViewVideo">
                您的浏览器不支持 video 标签
              </video>
              <div class="demo-upload-list-cover">
                <Icon type="ios-eye-outline" @click="handleView(preViewVideo)"></Icon>
              </div>
            </div>
          </template>
          <p v-if="!preViewImg.length&&!preViewVideo">无</p>
        </FormItem>
        <div class="footer">
          <Button @click="addEditArticleReset">关闭</Button>
        </div>
      </Form>
    </div>
    <!-- 图片放大 -->
    <preview-image :images="preViewImg" :showIndex="0" ref="preViewImage">
    </preview-image>

    <preview-video :videoUrl="preViewVideo" ref="preViewVideo">
    </preview-video>

    <!--流程信息-->
    <process-modal ref="process" />
  </div>
</template>
<script>
  import dtEditorShow from '@/components/dt/editor/show'
  import articleMgr from '@/biz/article/article'
  import previewVideo from "@/components/previewVideo.vue"
  import processModal from '@/components/biz/audit/process-modal.vue'
  
  export default {
    components: {
      dtEditorShow,
      previewVideo,
      processModal
    },
    computed: {
      auditRebut() {
        return this.info.auditStatus == 2 || this.info.auditStatus == 5
      }
    },
    data() {
      return {
        tab: '2',
        cityName: '',
        buildingName: '',
        articleTitle: '',
        articleTags: '',
        fileList: [],
        articleContent: '',
        newArticleContent: '',
        sensitiveWords: null,
        preViewImg: [],
        preViewVideo: '',
        info: null,
        old: null,
      }
    },
    methods: {
      // 关闭
      addEditArticleReset() {
        this.$router.go(-1)
      },
      handleView(val) {
        if (val) {
          let suffix = val.split('.').pop().toLowerCase()
          if (['mp4', 'avi', 'wmv', 'rmvb'].indexOf(suffix) > -1) {
            console.log('我是视频');
            this.preViewVideo = val
            this.preViewImg = []
            this.$refs.preViewVideo.show()
          } else {
            this.preViewImg = [val]
            this.preViewVideo = ''
            this.$refs.preViewImage.show()
          }
        }
      },
      // 初始化获取数据
      initData() {
        articleMgr.articleDetail({ articleId: this.$route.query.articleId }).then((res) => {
          if (res) {
            this.info = res.newZtArticleInfoTotalVO
            this.old = res.oldZtArticleInfoTotalVO
            this.show(this.info)
          }
        }).catch((err) => {
          this.$Message.error(err)
        })
      },
      show(res) {
        this.cityName = res.cityName
        this.buildingName = res.buildingAlias
        this.articleTitle = res.articleTitle
        this.articleTags = res.labelType
        this.articleContent = res.articleContent
        this.newArticleContent = res.newArticleContent
        this.sensitiveWords = res.sensitiveWords && res.sensitiveWords.length > 0 ? res
          .sensitiveWords : null
        // this.fileList = res.articleImage ? [{ url: res.articleImage }] : []
        this.preViewImg = []
        this.preViewVideo = ''
        if (res.articleImage) {
          let suffix = res.articleImage.split('.').pop().toLowerCase()
          if (['mp4', 'avi', 'wmv', 'rmvb'].indexOf(suffix) > -1) {
            console.log('我是视频');
            this.preViewVideo = res.articleImage
          } else {
            this.preViewImg = [res.articleImage]
          }
        }
      },
      onTab(tab) {
        this.show(this.tab == 2 ? this.info : this.old || {})
      },
      onAuditLog() {
        this.$refs.process.show({
          businessId: this.tab == 2 ? this.info.articleId : this.old.articleId,
          auditType: 13
        })
      },
    },
    created() {
      // 初始化获取数据
      this.initData()
    },
  }
</script>
<style lang="scss" scoped>
  .addEditArticlePageCont {
    .title {
      background-color: #f5f5f5;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
      padding: 0 14px 10px;
    }

    .addEditArticlePageMian {
      margin-top: 16px;
      // width: 800px;
      padding: 20px;
    }
  }

  .footer {
    text-align: center;

    button {
      width: 90px;
      margin: 0 10px;
    }
  }

  // 上传
  .demo-upload-list {
    display: inline-block;
    width: 60px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    position: relative;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    margin-right: 4px;
  }

  .demo-upload-list img {
    width: 100%;
    height: 100%;
  }

  .demo-upload-list video {
    width: 100%;
    height: 100%;
  }

  .demo-upload-list-cover {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.6);
  }

  .demo-upload-list:hover .demo-upload-list-cover {
    display: block;
  }

  .demo-upload-list-cover i {
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    margin: 0 2px;
  }

  .FormItemUpload .ivu-form-item-content {
    display: flex;
  }

  .imageSize {
    display: inline-block;
    margin-left: 16px;
    vertical-align: top;
    padding-top: 16px;
  }

  .wrong {
    color: red;
  }
</style>
